<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>比例尺</title>
</head>
<body>
    <script src="../node_modules/d3/dist/d3.js" charset="utf-8"></script>
    <script type="text/javascript">
        /* 缩放Scale
        *  将某一区域的值映射到另一区域，其大小关系不变。
        *  这就是比例尺（Scale）。
        * */

        /*
        * 1、线性比例尺
        *   线性比例尺，能将一个连续的区间，映射到另一区间。
        *   d3.scaleLinear() 返回一个线性比例尺，它的返回值是可以当做函数来使用的。(v3版为：d3.scale.linear())
        *   domain() 和 range() 分别设定比例尺的定义域和值域。
        * */
        let dataSet = [1.2, 2.3, 0.9, 1.5, 3.3];
        /* 现有要求如下：
        * 将 dataSet 中最小的值，映射成 0；将最大的值，映射成 300。
        */
        let min = d3.min(dataSet); // 获取最小值
        let max = d3.max(dataSet); // 获取最大值

        let liner = d3.scaleLinear()
            .domain([min, max]) // 定义域
            .range([0, 300]); //值域
        console.log(min, max);
        console.log(liner(2.5));

        /*
        * 2、序数比例尺
        *   有时候，定义域和值域不一定是连续的。
        *   d3.scaleOrdinal() 返回一个线性比例尺，它的返回值是可以当做函数来使用的。(v3版为：d3.scale.ordinal())
        *   domain() 和 range() 分别设定比例尺的定义域和值域。
        * */
        // 这些值都是离散的，线性比例尺不适合，需要用到序数比例尺。
        let index = [0, 1, 2, 3, 4];
        let color = ["red", "blue", "green", "yellow", "black"];

        let ordinal = d3.scaleOrdinal()
            .domain(index)
            .range(color);

        console.log(ordinal(3));
    </script>
</body>
</html>